<script setup lang="ts">
import MainCenter from '@/layout/MainCenter/index.vue'
import FriendLinkGroup from '@/components/friendLinkGroup/index.vue'
import { queryFriendLinks } from '@/api/friendLink.ts'
import { onMounted, ref,reactive } from 'vue'

// 链接的item
interface linkItem {
   createTime:string,
   isActived:number,
   linkName:string,
   linkDesc:string,
   linkLogo:string,
   linkUrl:string,
   linkId:number
}

// 链接的分组
interface linkGroup {
  cateGroup:number,
  links:Array<linkItem>,
  totalLinks:number
}

    let links = ref<linkGroup[]>([])
    // 获取友链信息
    const getFriendLinks = async () => {
        let {data:res}:{data:Array<linkGroup>} = await queryFriendLinks()
        links.value = res
        console.log('lllll',links.value)
    }

    onMounted(() => {
        getFriendLinks()
    })

</script>

<template>
  <div class="friend-link-page">
    <MainCenter>
      <!--   友链容器   -->
      <div class="friend-link-content">
        <FriendLinkGroup :groupItem="{groupName:linkItems.groupName}" v-for="(linkItems) in links" :linkItems=linkItems.links></FriendLinkGroup>
      </div>
    </MainCenter>
  </div>
</template>

<style lang="scss" scoped>
.friend-link-page {
  width: 100%;
  min-height: calc(100vh - var(--luox-header-height));
  background-image: url(@/assets/images/bg.svg);
  background-size: cover;
  .friend-link-content {
    width: 100%;
    margin-top: var(--luox-main-center-margin-top);
    margin-bottom: var(--luox-main-center-margin-top);
    padding: var(--luox-main-center-margin-top);
    box-sizing: border-box;
    background-color: var(--luox-whrite-color);
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
    border-radius: var(--luox-default-radius);
  }
}
</style>
